<template>
  <div class="page-container">
    <el-form inline>
      <el-form-item label="执行时间：">
        <el-date-picker
          v-model="searchParams.date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>
      <el-form-item label="运行状态：" label-width="100px">
        <el-select v-model="searchParams.status" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label-width="20px">
        <div class="refresh-icon" />
      </el-form-item>

      <el-form-item label-width="20px" style="float: right">
        <el-button type="primary" icon="el-icon-document">导出</el-button>
      </el-form-item>
    </el-form>

    <div class="table-box">
      <el-table
        v-loading="loading"
        stripe
        :data="tableData"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="p1" label="作业名称" />
        <el-table-column prop="p2" label="作业批次" />
        <el-table-column prop="p3" label="抽取方式" />
        <el-table-column prop="p4" label="运行状态" />
        <el-table-column prop="p5" label="作业负责人" />
        <el-table-column prop="p6" label="跳板机名称" />
        <el-table-column prop="p7" label="堡垒机名称" />
        <el-table-column prop="p8" label="开始时间" />
        <el-table-column prop="p9" label="结束时间" />
        <el-table-column prop="p10" label="失败原因" />
      </el-table>
    </div>
    <div class="page-box">
      <el-pagination
        background
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="changePageSize"
        @current-change="changePageNo"
      />
    </div>
  </div>
</template>

<script>
import crud from '@/mixins/crud'
export default {
  mixins: [crud],
  data() {
    return {
      searchParams: {
        date: [],
        status: ''
      },
      options: [
        {
          value: '1',
          label: '1'
        }
      ],
      tableData: [
        {
          p1: '深圳市新冠肺炎...',
          p2: '0109081_1',
          p3: 'API',
          p4: '失败',
          p5: '李丽',
          p6: 'TP001',
          p7: 'admin',
          p8: '2022/08/08 07:08:09',
          p9: '2022/08/08 07:08:09',
          p10: '调用接口失败'
        },
        {
          p1: '深圳市新冠肺炎...',
          p2: '0109081_1',
          p3: 'API',
          p4: '失败',
          p5: '李丽',
          p6: 'TP001',
          p7: 'admin',
          p8: '2022/08/08 07:08:09',
          p9: '2022/08/08 07:08:09',
          p10: '调用接口失败'
        },
        {
          p1: '深圳市新冠肺炎...',
          p2: '0109081_1',
          p3: 'API',
          p4: '失败',
          p5: '李丽',
          p6: 'TP001',
          p7: 'admin',
          p8: '2022/08/08 07:08:09',
          p9: '2022/08/08 07:08:09',
          p10: '调用接口失败'
        },
        {
          p1: '深圳市新冠肺炎...',
          p2: '0109081_1',
          p3: 'API',
          p4: '失败',
          p5: '李丽',
          p6: 'TP001',
          p7: 'admin',
          p8: '2022/08/08 07:08:09',
          p9: '2022/08/08 07:08:09',
          p10: '调用接口失败'
        },
        {
          p1: '深圳市新冠肺炎...',
          p2: '0109081_1',
          p3: 'API',
          p4: '失败',
          p5: '李丽',
          p6: 'TP001',
          p7: 'admin',
          p8: '2022/08/08 07:08:09',
          p9: '2022/08/08 07:08:09',
          p10: '调用接口失败'
        },
        {
          p1: '深圳市新冠肺炎...',
          p2: '0109081_1',
          p3: 'API',
          p4: '失败',
          p5: '李丽',
          p6: 'TP001',
          p7: 'admin',
          p8: '2022/08/08 07:08:09',
          p9: '2022/08/08 07:08:09',
          p10: '调用接口失败'
        }
      ]
    }
  }
}
</script>

<style lang="scss">
.page-container {
  height: 100%;
}
</style>
